<template>
  <page-header-wrapper>
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="商品列表">
      <div slot="extra">
        <a-radio-group v-model="status">
          <a-radio-button value="all">全部</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px;" />
      </div>
    </a-card>
    <div>
      <s-table
        ref="table"
        size="default"
        :localLoading="tableLoading"
        :rowKey="(record) => record.id"
        :showPagination="false"
        :columns="columns"
        :data="loadData"
      >
        <span slot="action" slot-scope="text, record">
          <a
            @click="toDetail(record)"
          >
            编辑
          </a>
        </span>
      </s-table>
    </div>
    <commodities-detail :model="detailData" :visible="detailVisible" @ok="modalOk" @cancel="() => { this.detailVisible = false }" />
  </page-header-wrapper>
</template>

<script>
import { getCommoditiesLists } from '@/api/commodities'
import { STable } from '@/components'
import CommoditiesDetail from './Detail'

export default {
  name: 'CommoditiesLists',
  data () {
    return {
      detailData: null,
      status: 'all',
      tableLoading: false,
      detailVisible: false,
      columns: [
        {
          title: '商品ID',
          dataIndex: 'id',
          customRender: (text, record, index) => index + 1
        },
        {
          title: '商品名称',
          dataIndex: 'name'
        },
        {
          title: '商品价格',
          dataIndex: 'price'
        },
        {
          title: '过期时间',
          dataIndex: 'expireTime'
        },
        {
          title: '能否购买',
          dataIndex: 'canBuy',
          customRender: (canBuy) => (canBuy) ? '能' : '否'
        },
        {
          title: '说明',
          dataIndex: 'summary'
        },
        {
          title: '添加时间',
          dataIndex: 'addTime',
          customRender: (time) => {
            console.log(this.timeFormat(time))
            return this.timeFormat(time)
          }
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: paramter => {
        return getCommoditiesLists({ $limit: 10, '$sort[id]': 1 }).then(res => {
          console.log(res)
          return {
            data: res.data
          }
        })
      }
    }
  },
  components: {
    STable,
    CommoditiesDetail
  },
  created () {
    this.init()
  },
  methods: {
    modalOk () {
      this.detailVisible = false
      this.init()
    },
    init () {
      getCommoditiesLists().then(res => {
        this.$refs.table.refresh(true)
      }).catch(e => {
        console.error(e)
      })
    },
    toDetail (record) {
      this.detailData = record
      this.detailVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
